<template>
  <div>
    <div class="table_header">
      <template v-if="renderTableLabel.length > 0">
        <template v-for="lab,index in renderTableLabel">
          <div
            class="header_col"
            :key="index"
          ><span>{{lab}}</span></div>
        </template>
      </template>
    </div>
    <div class="table_body">
      <div class="swiperBox">
        <template v-for="item,didx in dataTable">
          <div
            class="tbody_item_row"
            :key="didx"
          >
            <template v-for="itemName,itemIdx in Object.keys(item)">
              <div
                class="tbody_item"
                v-show="item[itemName] && itemName!=='pkid'"
                :key="itemIdx+'dd'"
              ><span
                  :class="candleClass(itemName,item[itemName])"
                  :title="item[itemName]"
                >{{item[itemName]}}</span></div>
            </template>

          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import mySwiper from '@component/swiper/index.vue'

export default {
  name: 'myTable',
  components: {
    mySwiper
  },
  data () {
    return {}
  },
  props: {
    data: {
      type: Array,
      required: false,
      default: () => []
    },
    dataTable: {
      type: Array,
      required: false,
      default: () => []
    }

  },
  computed: {
    renderTableLabel () {
      return this.data.map(item => item.label)
    }
  },
  methods: {
    candleClass (type, value) {
      type === 'state' && value === '已受理' ? 'colorGreen' : ''
      let cssText
      if (type === 'state' && value === '已受理') {
        cssText = 'colorGreen'
      } else if (type === 'state' && value === '未受理') {
        cssText = 'colorRed'
      } else if (type === 'edit') {
        cssText = 'colorBlue'
      }
      return cssText
    }
  }
}
</script>

<style lang="scss" scoped>
.table_header {
  display: flex;
  margin: 0 18px;
  .header_col {
    flex: 1;
    text-align: left;
    background: #dbe4fc;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    span {
      padding: 0 18px;
      font-weight: 600;
    }
  }
  .header_col:nth-child(1) {
    flex: 3;
  }
  .header_col:nth-child(2) {
    flex: 1;
  }

  .tbody_item {
    display: flex;
  }
}
.tbody_item_row {
  display: flex;
  margin: 0 18px;
  .tbody_item {
    flex: 1;
    text-align: left;
    font-size: 16px;
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    display: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    span {
      padding: 0 18px;
      text-overflow: ellipsis;
      overflow: hidden;
      color: #363942;
    }
    .colorGreen {
      color: #02cf97;
    }
    .colorRed {
      color: #f56c6c;
    }
    .colorBlue {
      color: #1466cf;
    }
  }
  .tbody_item:nth-child(1) {
    flex: 3;
  }
  .tbody_item:nth-child(2) {
    flex: 1;
  }
}
.tbody_item_row:nth-child(even) {
  background: #ebf2f9;
}
</style>
